import styled from 'styled-components'


const Container = styled.div<{ $active: number }>`
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .625rem;
    background-color: ${({ $active, theme }) => $active ? theme.background.select : theme.background.box};
`

const Title = styled.span`
    font-size: .75rem;
    font-weight: bold;
    color: ${(prop) => prop.theme.text.normal};
    padding: .75rem 0;
    position: relative;
`

const Dot = styled.div`
    background: #FF5867;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-100%);
`

interface Props {
    className?: string;
    active?: boolean;
    hasNew?: boolean;
    title: string;
    onClick?: () => void
}

const Item: React.FC<Props> = ({ title, hasNew, className, active, onClick }) => {
    return <Container
        $active={Number(active)}
        className={className}
        onClick={onClick}
    >
        <Title>{
            title}
            {hasNew && <Dot />}
        </Title>
    </Container>
}

export default Item